<template>
  <div class="member-info-page">
    <div id="setup-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+43)+'px'
  }">
      <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
        <div id="back-button" @click="$router.push('/MemberSetUp')">
          <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
        </div>
        <span>个人资料</span>
      </div>


      <div class="form">
        <div class="item" style="line-height: 30px; padding-top: 10px">
          <div class="left">
            <span style="position: relative; top: -13px;left: -15px">头像: </span>
            <img width="50px" style="width: 50px; height: 50px;border-radius: 50%" :src="userInfo.icon" alt="">
          </div>
          <div class="right">
<!--            <el-upload-->
<!--              style="position: relative; top: 10px;right: 10px;"-->
<!--              name="myUploadFile"-->
<!--              :headers="getHeader()"-->
<!--              :action="UploadFileUrl"-->
<!--              :show-file-list="false"-->
<!--              :on-success="successUpload">-->
<!--              <el-button size="small" type="primary">修改头像</el-button>-->
<!--            </el-upload>-->
            <el-button style="position: relative; top: 15px; right: 10px;" size="small" type="primary" @click="changeIcon">修改头像</el-button>
          </div>
          <div class="c"></div>
        </div>

        <div class="item" @click="changeInfo('nickname')">
          <div class="left">
            昵称:
            <span v-text="userInfo.nickname"></span>
          </div>
          <div class="right">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="c"></div>
        </div>

        <div class="item" @click="changeInfo('sex')">
          <div class="left">
            性别:
            <span v-text="userInfo.sex"></span>
          </div>
          <div class="right">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="c"></div>
        </div>

        <div class="item" @click="changeInfo('birthday')">
          <div class="left">
            生日:
            <span v-text="userInfo.birthday"></span>
          </div>
          <div class="right">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="c"></div>
        </div>


        <my-photo ref="my-photo"/>
      </div>


    </div>
  </div>
</template>

<script>
import MyPhoto from '../common/MyPhoto'
import Vue from 'vue'
export default {
  name: 'MemberInfo',
  components: {MyPhoto},
  data:function () {
    return {
      userInfo:demoData.member
    }
  },
  mounted () {
    this.getInfo()
  },
  methods:{
    // 选择头像
    changeIcon:function () {
      let $this=this
      $this.$refs['my-photo'].chooseAct(function (filePath) {
        $this.uploadIcon(filePath,function (url) {
          $this.requestUpdate({
            icon:url
          })
        })
      })
    },
    // 上传头像
    uploadIcon: function (filePath,callback) {
      let $this = this
      var wt = plus.nativeUI.showWaiting()
      console.log('filePath',JSON.stringify(filePath))
      var task = plus.uploader.createUpload($this.UploadFileUrl,
        {method: 'POST'},
        function (returnData, status) {
          var res=JSON.parse(returnData.responseText)
          // console.log('res',JSON.stringify(returnData))
          // 上传完成
          if (status === 200) {
            plus.nativeUI.toast('更新成功')
            // plus.nativeUI.alert('上传成功:' + JSON.stringify(res))
            callback(res.data)
            wt.close()
          } else {
            plus.nativeUI.alert('上传失败:' + status)
            wt.close()
          }
        }
      )

      task.setRequestHeader('Authorization','Bearer '+$this.CurrUser.getToken());
      task.setRequestHeader('DeviceId',$this.GetDeviceID());
      task.setRequestHeader('UserType','Member');

      var fileName = $this.getFileName(filePath)

      console.log('fileName',fileName)

      task.addFile(filePath, {key: 'myUploadFile', name: fileName})
      // task.addData('DeviceID', DeviceID)
      task.start()
    },
    // 获取-个人信息
    getInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (data) {
        $this.userInfo=data
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    changeInfo:function (type) {
      switch (type){
        case 'nickname':
          this.changeNickname()
          break
        case 'sex':
          this.changeSex()
          break
        case 'birthday':
          this.changeBirthday()
          break
      }
    },
    // 上传成功
    successUpload: function (res) {
      let $this=this
      if (res.code === 0) {
        $this.requestUpdate({icon:res.data})
      } else {
        this.successTip(res.message, "error")
      }
    },
    // 更改-昵称
    changeNickname:function () {
      this.$prompt('修改昵称:', '系统提示', {
        customClass:'my-prompt-box',
        inputValue:this.userInfo.nickname,
        inputPattern:/[\S\s]{1,10}$/,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.requestUpdate({nickname:value})
      }).catch(() => {
      });
    },
    // 更改-性别
    changeSex:function () {
      let $this = this
      $this.bus.$emit('ChooseSexDialogCallBus',$this.userInfo.sex,function (sex) {
        $this.requestUpdate({sex:sex})
      })
    },
    // 更改-生日
    changeBirthday:function () {
      let $this = this
      $this.bus.$emit('ChooseDateDialogCallBus',$this.userInfo.birthday,function (birthday) {
        $this.requestUpdate({birthday:birthday})
      })
    },
    // 发起-更新
    requestUpdate:function (form){
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/updateInfo', form, function (data) {
        $this.successTip("更改成功")
        $this.getInfo()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
  }
}
</script>

<style scoped>

</style>
